<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="评论"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <van-swipe-cell v-for="(item, index) in newws" :key="index">
        <!-- UI库的van-cell包裹住,就可以在其中使用自己写的样式结构了 -->
        <van-cell  @click="SeeDetailsFn(item.Postid)">
          <!-- 评论展示 -->
          <div class="newsbox">
            <!-- 头像 -->
            <div class="img">
              <img :src=item.img alt="" style="width:.40rem;height:.40rem">
            </div>
            <!-- 内容 -->
            <div class="panel">
              <!-- 左侧昵称,时间,评论内容 -->
              <div class="panelleft">
                <p class="name">{{ item.name }}</p>
                <p class="time">{{ item.time }}</p>
                <!-- 最多显示两行 -->
                <div class="van-multi-ellipsis--l2 new">
                  {{ item.new }}
                </div>
              </div>
              <!-- 右侧为该帖子中第一张图片 -->
              <div class="panelright">
                <img :src=item.Layout alt="">
              </div>
            </div>
          </div>
        </van-cell>
        <!-- 删除 -->
        <template #right  right-width=".55rem">
          <van-button square type="danger" text="删除" @click="deleteFn(index)"/>
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, SwipeCell, Button, Cell } from 'vant'
Vue.use(NavBar)
Vue.use(SwipeCell)
Vue.use(Button)
Vue.use(Cell)
export default {
  // 设置data初始值
  data () {
    return {
      newws: [
        {
          Postid: '01',
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'),
          name: 'dsacsdaf',
          time: '04-25 09:24',
          new: '02我老婆',
          Layout: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589140740222&di=dcd10cb5525e294a166ec45e3f759191&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F13%2F20190113134002_szuom.thumb.700_0.jpg'
        },
        {
          Postid: '02',
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'),
          name: 'dsacsdaf',
          time: '04-26 09:24',
          new: '一段美丽的邂逅，我不会追任何东西，也不会刻意去寻找，但我遇见了你，初次遇见是在一段ditf的amv中，没想到会是13集最后一部分，旁白中描述着这是一个傻姑娘为了心爱的darling渴望变成人的故事。不知为何心中有一丝莫名的感动。我想去试着了解你，想去赞美你的盛世美颜，你的一颦一笑都让我为你忧愁为你欣悦，你的一举一动都让我为之心动。我不知何时喜欢上了你，只记得我在一晚上从1集看完最新的19集后，对你的感情如潮水般涌来，在这种感情中我如浮萍般脆弱，不堪一击。当我再次看见13集时，依旧如初见一般，那段两分十三秒的amv中唯有你的回眸与广对你说的话还清晰可见，我想起了你小时候被博士清除记忆时是那么的痛苦，也拼命要保留下darling的记忆，最美的记忆一定会被保留的。这份感情就让我保留一生吧，同时也祝福你，一次回眸一场缘起，这是我与她初相遇的故事。',
          Layout: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589139347221&di=88d1fb179a85373b4d1276de99d4c535&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F27%2F20180527233356_dmrxn.thumb.700_0.png'
        },
        {
          Postid: '03',
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'),
          name: 'dsacsdaf',
          time: '04-27 09:24',
          new: '不为别的，只为让自己每天都记得向隔着次元壁障的你说说话希望在那个次元的你每天每时每秒，不论在哪，不管站在谁的身边，都能够幸福开心的笑着~',
          Layout: 'http://img5.imgtn.bdimg.com/it/u=3695266241,3252303058&fm=26&gp=0.jpg'
        }
      ]
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    // 点击根据id值跳转至帖子详情页
    SeeDetailsFn (Postid) {
      // console.log('携带id跳转至帖子详情页', Postid)
    },
    // 删除按钮
    deleteFn (index) {
      // console.log('删除')
      // console.log(index)
      this.newws.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    .newsbox {
      display: flex;
      margin-top: .05rem;
      // 头像框
      .img {
        text-align: center;
        width: 15%;
      }
      // 消息框
      .panel {
        flex: 1;
        padding-right: .15rem;
        display: flex;
        justify-content: space-between;
        // 显示信息
        .panelleft {
          // 消息昵称
          .name {
            font-size: .14rem;
            line-height: .20rem;
          }
          // 时间
          .time {
            font-size: .13rem;
            color: #c3c3c3;
            margin-bottom: .05rem;
            line-height: .25rem;
          }
          // 消息
          .new {
            width: 2.0rem;
            font-size: .15rem;
            line-height: .20rem;
          }
        }
        // 右侧显示图片
        .panelright {
          width: .75rem;
          height: 1.0rem;
          img {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
    // 单元格
    /deep/ .van-cell {
      height: 1.35rem;
    }
    // 左滑删除
    /deep/ .van-button {
      height: 1.35rem;
    }
  }
</style>
